<html>
<head>
    <style type="text/css">
        .outer {
            overflow-y: scroll;
            width: 200px;
            height: 100px;
            padding: 50px 0px;
            background-color: #eee;
            border: 2px solid black;
        }
        .inner {
            /*margin-left: -100px;*/
		    margin-left:50px;
            margin-right: 0px;
            margin-top: 0px;
            width: 90%;
            height: 50%;
            padding: 0px 0px;
            border: 2px solid #080;
            background-color: #00ffff;
        }
		.nested {
			width: 160px;
			height: 50px;
			background-color:red;
			margin-left:auto;
			margin-right: 50px;
		}
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
		</div>
        <!-- <span>This property is a shorthand for the following CSS properties: border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius Syntax</span> -->
        <!--<span>This property is a shorthand for the following</span>-->
        <span>a b c d e f g h i j k l m o p q r s t u v w x y z</span>
    </div>
</body>
</html>